<script setup>
const list = [
  {
    title: "使用帮助",
    src: "https://static.insta360.com/assets/www/project/official/component/header/ic_header_aftersales@2x.png",
  },
  {
    title: "购买渠道",
    src: "https://static.insta360.com/assets/www/project/official/component/header/ic_header_buy@2x.png",
  },
  {
    title: "延迟服务",
    src: "https://res.insta360.com/static/infr_base/758b4e5802e1aae57eecf36361b6c396/%E9%A3%9E%E4%B9%A620220708-120633.png",
  },
  {
    title: "售后服务",
    src: "https://static.insta360.com/assets/www/project/official/support/ic-repair.png",
  },
  {
    title: "售后政策",
    src: "https://static.insta360.com/assets/www/project/official/component/header/ic_header_aftersales@2x.png",
  },
];
</script>
<template>
  <div class="pt-[64px]">
    <div class="bg-[#f8f9fc]">
      <div
        class="h-[100px] lg:h-[220px] max-w-screen-lg mx-auto flex items-center justify-center lg:justify-between"
      >
        <div class="text-[26px] tracking-[2px] font-bold">服务与支持</div>
        <img
          class="h-[180px] lg:flex hidden"
          src="https://res.insta360.com/static/assets/storage/20210108/4492cdd12d4e55603577c5a4eae51ec3/kv_2x.png"
          alt=""
        />
      </div>
    </div>
    <Container top="0">
      <div
        class="grid grid-cols-2 lg:grid-cols-5 lg:divide-x lg:h-[100px] lg:mt-[100px]"
      >
        <div
          v-for="item in list"
          class="size-100 flex flex-col justify-center items-center mt-[20px] lg:mt-[0px]"
        >
          <img :src="item.src" class="size-[60px] lg:size-[90px]" alt="" />
          <div>{{ item.title }}</div>
        </div>
      </div>
    </Container>
  </div>
</template>
<style scoped lang="scss"></style>
